<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    
    <link rel="icon" href="./images/icon/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<style>
    /*上传样式*/
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>
<body>
<div id="index">
    <header>

        <div class="search">
            <img src="./images/public/hkclogo.png" style="width: 50px;display: inline;">
            <a href="http://localhost:8080/hkccommunity/" style="text-decoration: none;color:black;"><span>海经校园论坛</span></a>
            <el-input
                    @keyup.enter.native="search"
                    prefix-icon="el-icon-search"
                    placeholder="搜索关键字"
                    v-model="input"
                    clearable
                    style="width: 50%;">
            </el-input>
            <el-row>
                <el-button v-show="user == null" type="primary" @click="dialogVisible=true">注册登入</el-button>
                <div v-show="user !=null">
                    <div class="demo-basic--circle"  style="display: flex;justify-content: center;align-items: center;gap: 10px" >
                        <div class="block"><el-avatar size="large" :src="circleUrl"></el-avatar></div>
                        <span>{{user == null? "" : user.username}}</span>
                        <el-link @click="exitLogin" type="warning">退出登入</el-link>
                    </div>
                </div>

            </el-row>
        </div>
    </header>
    <main  class="main-centre" v-loading="loading">
        <iframe id="myIframe" ref="myIframe" src="http://localhost:8080/hkccommunity/pages/problem.html" frameborder="0" name="head-top" class="c_iframe" width="100%" height="auto">

        </iframe>
    </main>
<!--    //对话框-->
    <el-dialog
            title="注册登入"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <div style="margin-bottom: 10px;display: flex;justify-content: center;">
            <span v-show="!loginShow" style="font-weight: bold;font-size: 25px">用户登入</span>
            <span v-show="loginShow" style="font-weight: bold;font-size: 25px;text-align: center">用户注册</span>

        </div>

        <el-form v-show="!loginShow" ref="form" :model="loginForm" label-width="80px">
            <el-form-item label="手机号">
                <el-input placeholder="请输入手机号" v-model="loginForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input show-password placeholder="请输入密码" v-model="loginForm.password"></el-input>
            </el-form-item>
        </el-form>

<!--        注册表单-->
        <el-form v-show="loginShow" ref="registerForm" :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username"
                          :rules="[
                          { required: true, message: '请输入用户名', trigger: 'blur' },
                          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                          ]">
                <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password"
                          :rules="[
                          { required: true, message: '请输入密码', trigger: 'blur' }
                          ]">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass" :rules="rules.checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone" :rules="rules.phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>

            <el-form-item label="头像上传">
                <el-upload
                        name="upload"
                        class="avatar-uploader"
                        action="http://localhost:8080/hkccommunity/login/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.headImage" :src="ruleForm.headImage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

<!--            <el-form-item>-->
<!--                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
<!--                <el-button @click="resetForm('ruleForm')">重置</el-button>-->
<!--            </el-form-item>-->
        </el-form>
        <div style="margin: auto;display: flex;justify-content: center;align-items: center;gap: 20px;font-weight: bold">
            <el-button  type="text" style="font-size: 16px" @click="loginShow = true">注册登入</el-button>
            <el-button type="text" style="font-size: 16px" @click="loginShow = false">密码登入</el-button>
        </div>

        <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;gap: 20px">
            <el-button
                    @click="dialogVisible = false,Object.keys(ruleForm).forEach(key => (ruleForm[key] = '')),this.$refs.ruleForm.resetFields(),this.buttonLoad = false;;">取 消</el-button>
            <el-button type="primary" :loading="buttonLoad" @click="onsub">确 定</el-button>
        </span>
    </el-dialog>
</div>

</body>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var index = new Vue({
        el:"#index",
        data(){
            const validateCheckPass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.ruleForm.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
            const validatePhone = (rule, value, callback) => {
                const regExp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                if (!regExp.test(value)) {
                    callback(new Error('请输入正确的手机号'))
                } else {
                    callback()
                }
            };
            // 搜索框内容
            return {
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                loginForm:{
                    phone:"",
                    password: "",
                },
                param:{
                    user:null,
                    input:null,
                },
                //用户信息
                user:null,
                loginShow:true,
                input: "",
                ruleForm: {
                    username: "",
                    password: "",
                    headImage: "",
                    checkPass: '',
                    phone: "",
                },
                buttonLoad:false,
                loading: true,
                timer: null,
                //对话框控制
                dialogVisible: false,
                rules: {
                    checkPass: [
                        {required: true, message: '请确认密码', trigger: 'blur'},
                        {validator: validateCheckPass, trigger: 'blur'}
                    ],
                    phone:[
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        {validator:validatePhone,trigger: 'blur'},

                    ],
                },
            }
        },
        methods: {
            //查
            search(){
                this.timer = null;
                this.param.user = this.user;
                this.param.input = this.input;

                if(this.input != null){
                    this.$refs.myIframe.src = "http://localhost:8080/hkccommunity/pages/problem.html";
                }
                // console.log(this.param);
                this.timer = setTimeout(()=>{

                    this.sendMessage(this.param);
                },300);

            },

            //增
            //注册登入功能
            onsub(){
                this.buttonLoad = true;
                let url = null;
                let upForm = null;
                if(this.loginShow){
                    url = "http://localhost:8080/hkccommunity/login/register";
                    if(this.ruleForm.headImage == null || this.ruleForm.headImage == ""){
                        this.ruleForm.headImage = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
                    }
                    upForm = this.ruleForm;
                }else {
                    url = "http://localhost:8080/hkccommunity/login/getUserByUser"
                    upForm = this.loginForm;
                }

                        axios.post(url,upForm)
                            .then(res=>{
                                if(res.data.code == 2021){
                                    this.buttonLoad = false;
                                    this.user = res.data.data;
                                    this.sendMessage(this.user);
                                    if (res.data.data.headImage != null && res.data.data.headImage != ""){
                                        this.circleUrl = res.data.data.headImage;
                                    }
                                    this.$message.success(res.data.message);
                                    this.dialogVisible = false;

                                    Object.keys(this.ruleForm).forEach(key => (this.ruleForm[key] = ''));
                                    Object.keys(this.loginForm).forEach(key => (this.loginForm[key] = ''));
                                }else {
                                    this.buttonLoad = false;
                                    this.$message.warning(res.data.message);
                                }
                            })
                            .catch(err =>{
                                this.buttonLoad = false;
                                this.$message.error("404 系统错误！！！")
                            })

            },

            //父传子
            sendMessage(data) {
                this.param.user = this.user;
                this.param.input = this.input;
                //判断子级的节点存在，$refs取vue节点
                    // console.log(this.param)
                var iframeWin = this.$refs.myIframe.contentWindow;  //获取这个属性
                iframeWin.postMessage(this.param, "*");   //发送数据

            },

            exitLogin(){
                axios.get("http://localhost:8080/hkccommunity/login/exitLogin")
                    .then(res =>{
                        if(res.data.code == 2011){
                            this.user = null;
                            this.sendMessage(this.user)
                            this.$message.success(res.data.message);
                        }
                    })
                    .catch(err =>{
                        console.log(err);
                    })
            },

            //判断是否登入
            isLogin(){
                axios.get("http://localhost:8080/hkccommunity/login/isLogin")
                    .then(res =>{
                        if(res.data.code == 2021){
                            this.user = res.data.data;
                            this.sendMessage(this.user);
                            if (res.data.data.headImage != null && res.data.data.headImage != ""){
                                this.circleUrl = res.data.data.headImage;
                            }else {
                                this.circleUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                            }

                        }
                    })
                    .catch(err =>{
                        console.log(err);
                    })
            },



            handleClose(done) {
                Object.keys(this.ruleForm).forEach(key => (this.ruleForm[key] = ''));
                this.buttonLoad = false;
                this.$confirm('确认关闭？')
                    .then(_ => {

                        done();
                        this.$refs.ruleForm.resetFields();
                    })
                    .catch(_ => {});
            },

            handleMessage(event){
                this.dialogVisible = event.data;
            },
            //头像上传
            handleAvatarSuccess(res, file) {
                console.log(res)

                this.ruleForm.headImage = res;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        mounted () {
            this.timer = null;
            // window.localStorage.setItem("userId","123456")
            this.isLogin();
            this.timer = setTimeout(()=>{
                this.loading = false;
            },1000);
            //监听
            window.addEventListener("message", this.handleMessage);


        },
    })

</script>
</html>